<template>
	<view class="content">
		<view class="top-header">
			<view class="top-height" :style="{height:capsuleTop}"></view>
			<view class="top-bg">
				<view class="top-content-wrap">
					<view class="logo" :style="{height:capsuleHeight}">
						<image class="logo-image" mode="heightFix" :src="logo"></image>
					</view>
					<image class="icon-01" mode="widthFix" :src="icon8"></image>
					<image class="icon-02" mode="widthFix" :src="icon7"></image>
					<image class="icon-03" mode="widthFix" :src="icon6"></image>
				</view>
			</view>
		</view>
		<view class="amount-wrap">
			<view class="amount">
				<view class="" v-if="BurstList.one_text">
					{{BurstList.one_text}} <text
						style="color: red;">{{BurstList.two_text}}</text>{{BurstList.three_text}}{{BurstList.four_text}}
				</view>
			</view>
		</view>
		<view class="contet-img" v-if="!scanCodeUrl">
			<image class="contet-imgs" mode="widthFix" @click="handleCodeClick"
				:src="url1">
			</image>
		</view>
		<view class="btn" v-if="!scanCodeUrl">
			<uv-btn @click="handleCodeClick" background="#25AEA2" text="扫码" :loading="loading"
				loading-text="请稍后..."></uv-btn>
		</view>
		<view class="top-border" v-if="!scanCodeUrl">

		</view>
		<view class="time-tips1" v-if="port">
			已扫描端口：{{port}}
		</view>
		<view class="time-tips" v-if="time_list.length">
			请选择充电时长：
		</view>
		<view class="time-list">
			<view :class="{'time-item':true,'current-time' : currentTime==index}" v-for="(item,index) in time_list"
				@click="handleTimeClick(item,index)">
				<text class="item-text">{{item.times}}</text>
				小时
			</view>
		</view>
		<view class="common-bottom" v-if="tariffDetailsList.length > 0">
			<view>资费详情：</view>
			<view>
				<view class="font-wei" v-for="(item,index) in tariffDetailsList" :key="index">{{item}}</view>
			</view>
		</view>
		<view class="btn-item">
			<uv-btn :custom-style="customStyle" :loading="loadings" @click="handleBalanceChargeClick"
				background="#0da297" loading-text="开启中..." text="开启充电"></uv-btn>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				port: '', //端口号
				time_list: [],
				time_lists: [{
						times: '1'
					},
					{
						times: '2'
					},
					{
						times: '3'
					},
					{
						times: '4'
					},
					{
						times: '5'
					},
					{
						times: '6'
					},
					{
						times: '7'
					},
					{
						times: '8'
					},
					{
						times: '9'
					},
					{
						times: '10'
					},
					{
						times: '11'
					},
					{
						times: '12'
					}
				],
				currentIndex: null,
				loading: false,
				loadings: false,
				// #ifdef	MP-WEIXIN
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 'px',
				capsuleHeight: uni.getMenuButtonBoundingClientRect().height + 'px',
				// #endif
				logo: 'https://images.cd1a.cn/user/296373/appoint_repair/20230719165526.png',
				icon6: this.$imgUrl + 'index/icon-03.png',
				icon7: this.$imgUrl + 'index/icon-02.png',
				icon8: this.$imgUrl + 'index/icon-01.png',
				url1:this.$imgUrl+'charge/Scanning.png',
				currentTime: null,
				codeUrl: '', //小程序二维码链接
				tariffDetailsList: [], //资费详情
				select:1,
				text:'',
			}
		},
		onLoad() {},
		onShow() {
			
		},
		watch: {
			scanCodeUrl: {
				handler(newVal, oldVal) {
					if (newVal) {
						let length = newVal.length;
						this.port = newVal.substring(length - 8, length);
						this.scanList();
					}
				},
				immediate: true
			},
		},
		props: ['BurstList', 'scanCodeUrl'],
		methods: {
			//开启充电
			handleBalanceChargeClick() {
				let userid = uni.getStorageSync('userId');
				if (!userid) {
					this.$utils.toast('开启充电失败,请稍后重试！');
				} else {
					if (!this.codeUrl) {
						this.codeUrl = this.scanCodeUrl;
					}
					//select 1 余额充电 2 月卡充电
					if(this.select == 1){	
						if (!this.codeUrl) {
							this.$utils.toast('请先进行扫码！');
						} else if (this.currentTime === null) {
							this.$utils.toast('请选择充电时长！');
						} else {
							this.startCharge();
						}
					}else{
						this.$utils.toast(this.text);
					}
					
				}

			},
			//选择时长
			handleTimeClick(item, index) {
				this.currentTime = index;
				this.tariffDetailsList = item.pro;
			},
			scanList() {
				let codeUrl = '';
				if (this.scanCodeUrl) {
					codeUrl = this.scanCodeUrl;
				} else if (this.codeUrl) {
					codeUrl = this.codeUrl;
				}
				let userid = uni.getStorageSync('userId');
				if (!userid) {
					this.time_list = this.time_lists;
					this.$utils.toast('网络繁忙，请稍后重试！');
				} else {
					this.$u.api.getBurstscan({
						str: codeUrl
					}).then(res => {
						if (res.code == 200) {
							this.time_list = res.data.time_list;
							this.select = res.data.select;
							this.text = res.data.text;
						} else {
							this.$utils.modal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false
							});
						}
					}).catch(() => {
						this.$utils.toast('网络繁忙，请稍后重试！');
					});
				}



			},
			//开启充电接口
			startCharge() {
				this.loadings = true;
				this.$u.api.getBurstStart({
					time: this.time_list[this.currentTime].times,
					str: this.codeUrl
				}).then(res => {
					if (res.code == 200) {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false
						});
					} else {
						this.$utils.modal({
							title: '温馨提示',
							content: res.msg,
							showCancel: false
						});
					}
					this.loadings = false;
				}).catch(() => {
					this.loadings = false;
				});
			},
			//Scan code to charge
			handleCodeClick() {
				uni.scanCode({
					success: (res) => {
						if (res.result) {
							console.log(res);
							let url = res.result;
							let length = url.length;
							let urls = url.substring(8, length - 8);
							let reg = 'cd1a.cn';
							if (urls.indexOf(reg) !== -1) {
								this.port = url.substring(length - 8, length);
								this.codeUrl = url;
								console.log(1111);
								this.scanList();
							} else {
								this.$utils.modal({
									title: '温馨提示',
									content: '请扫描正确二维码!',
									showCancel: false
								});

							}

						} else {
							this.$utils.modal({
								title: '温馨提示',
								content: '请扫描正确二维码!',
								showCancel: false
							});
						}
					},
					fail: () => {
						this.$utils.modal({
							title: '温馨提示',
							content: '请扫描正确二维码!',
							showCancel: false
						});
					}


				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-header {
		overflow: hidden;
		width: 100%;
		position: relative;
		height: 166rpx;
		/* border-radius: 0 0 3000px 3000px / 0 0 300px 300px; */
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
	}

	.top-height {
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
	}

	.top-bg {
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
		overflow: hidden;

	}

	.top-height {
		background: linear-gradient(90deg, #0da297 0%, #27b393 100%);
	}

	.logo {
		z-index: 20;
	}

	.logo-image {
		height: 60rpx;
		position: absolute;
		left: 30rpx;
		bottom: 20rpx;
	}

	.icon-01,
	.icon-02,
	.icon-03 {
		position: absolute;
		z-index: 10;
	}

	.icon-01 {
		width: 100rpx;
		top: 150rpx;
		right: 30rpx;
	}

	.icon-02 {
		width: 120rpx;
		top: 80rpx;
		right: 0;
	}

	.icon-03 {
		width: 90rpx;
		top: 48rpx;
		left: 0;
	}

	.content {
		position: relative;
		padding-bottom: 200rpx;
	}

	.top {
		/* position:fixed;
		left:0;
		top:0; */
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		overflow: hidden;
	}


	.top-title>view {
		line-height: 32rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.top-title-02 {
		padding: 40rpx 40rpx;

	}

	.enter {
		padding: 30rpx 0;
		padding-bottom: 20rpx;
	}

	.btn {
		margin: 20rpx auto 0;
		width: 70%;
	}

	.btn-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		width: 100%;
		background-color: #fff;
	}

	.list {
		padding: 0 40rpx;
		padding-bottom: 130rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;
		border-top: 1px solid #e5e5e5;
		padding: 10rpx 0;
	}

	.item-choose {
		padding: 0 10rpx;
		/* width:126rpx; */
		height: 44rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 28rpx;
		color: #0da297;
		border: 1px solid #0da297;
		border-radius: 22rpx;
		margin-left: 10rpx;
	}

	.item-title {
		flex: 1;
		line-height: 44rpx;
		font-size: 30rpx;
	}

	.item-choose.active {
		color: #fff;
		background-color: #0da297;
	}

	.contet-img {
		margin: 30rpx auto 0;
		width: 250rpx;
	}

	.contet-imgs {
		width: 250rpx;
		height: 250rpx;
	}

	.top-border {
		margin-top: 50rpx;
		width: 100%;
		height: 20rpx;
		background: #ccc;
	}

	/* card */
	.amount-wrap {
		margin-top: 30rpx;
		width: 100%;
		padding: 0 30rpx;
	}

	.amount {
		background: #f0f0f0;
		box-shadow: 0px 0px 21px 0px rgba(0, 4, 0, 0.25);
		border-radius: 24rpx;
		min-height: 200rpx;
		padding: 20rpx;
		font-weight: bold;
		color: black
	}

	.time-tips1 {
		margin: 20rpx;
		font-weight: bold;
		color: red;
		font-size: 30rpx;
	}

	.time-tips {
		margin: 10rpx 20rpx 10rpx 20rpx;
		font-weight: bold;
		color: black;
		font-size: 30rpx;
	}

	/* 时长选择页面 */
	.time-list {
		margin-top: 30rpx;
		padding: 0 1.66% 20rpx;
	}

	.time-item {
		text-align: center;
		display: inline-block;
		overflow: hidden;
		width: 30%;
		margin: 0 1.66%;
		padding: 24rpx 0;
		margin-bottom: 30rpx;
		border: 2rpx solid #0DA297;
		border-radius: 20rpx;
		color: #0DA297;
		font-size: 30rpx;
		position: relative;
	}

	.item-text {
		font-size: 35rpx;
		font-weight: bold;
	}

	.btn-item {
		padding: 0 24rpx 20rpx;
		width: 100%;
		background: #f0f0f0;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.time-item.current-time {
		background-color: #0DA297;
		color: #fff;
	}

	.common-bottom {
		color: black;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		line-height: 28rpx;
		font-weight: bold;
		padding: 5rpx 24rpx 0;
	}

	.common-bottom .font-wei {
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}
</style>